<img
  id="resize-img"
  alt="Gelderland Map"
  src="https://raw.githubusercontent.com/jamietre/ImageMapster/main/examples/images/Provincie_Gelderland.gif"
  usemap="#resize-map"
/>

<map name="resize-map">
  <area
    href="#"
    shape="poly"
    coords="898,654,906,633,900,603,912,593,914,579,919,564,927,562,928,554,937,548,933,541,949,534,959,539,985,540,1000,544,999,550,993,555,997,562,999,574,1008,578,1013,579,1013,585,1020,592"
    data-alt="Aalten"
    data-title="Aalten"
  />
  <area
    href="#"
    shape="poly"
    coords="496,365,496,351,489,339,498,331,485,317,459,318,445,307,445,299,454,295,452,288,447,282,446,278,466,268,459,250,498,250,501,244,518,250,522,261,544,251,569,245,593,244,597,233,604,234,603,244,623,243,627,245,630,252,626,268,631,283,626,290,635,295,645,318,641,330,649,351,648,359,656,374,640,393,635,398,628,410,628,419,614,440,593,436,583,440,581,438,578,417,554,414,551,411,546,411,527,391,525,367,520,365"
    data-alt="Apeldoorn"
    data-title="Apeldoorn"
  />
  <area
    href="#"
    shape="poly"
    coords="491,511,496,494,516,467,523,461,530,466,550,466,550,452,558,452,576,438,583,442,576,452,571,467,574,501,585,520,604,536,585,544,583,562,572,553,569,562,562,562,558,567,558,569,553,581,546,579,534,572,525,568,509,568,508,553,512,540,529,546,532,539,529,534,527,518"
    data-alt="Arnhem"
    data-title="Arnhem"
  />
  <area
    href="#"
    shape="poly"
    coords="295,353,299,345,297,338,307,328,314,331,323,325,325,328,325,335,332,342,348,338,348,331,352,330,352,325,369,323,384,325,393,309,410,295,418,295,421,278,438,281,447,273,447,283,453,295,449,297,449,307,460,323,485,321,495,330,491,339,494,348,496,366,473,365,466,367,456,367,440,370,440,379,432,381,424,379,418,384,410,381,353,394,344,396,337,405,338,412,325,417,318,414,316,417,303,403,314,404,306,396,306,387,316,381,307,374,304,370,297,367"
    data-alt="Barneveld"
    data-title="Barneveld"
  />
  <area
    href="#"
    shape="poly"
    coords="854,424,864,425,867,414,885,405,891,408,898,405,900,412,909,390,905,373,893,360,903,353,910,337,927,332,966,331,976,339,975,344,978,346,980,349,992,339,1001,344,1003,337,1018,349,1021,369,1013,380,1049,394,1069,391,1069,411,1064,417,1064,424,1059,433,1035,439,1029,454,1027,467,1013,459,1013,449,1007,446,999,454,987,446,985,442,978,445,978,457,971,461,972,470,957,480,940,485,926,468,921,467,895,489,877,485,871,466,865,464"
    data-alt="Berkelland"
    data-title="Berkelland"
  />
  <area
    href="#"
    shape="poly"
    coords="412,647,419,616,433,620,452,628,461,628,478,635,489,635,503,645,503,649,506,651,501,662,495,661,482,670,475,668,468,679,447,673,415,668,419,663,417,654,412,649"
    data-alt="Beuningen"
    data-title="Beuningen"
  />
  <area
    href="#"
    shape="poly"
    coords="680,467,717,438,717,422,729,421,739,419,748,412,748,408,755,400,769,404,776,401,781,391,808,374,827,377,827,384,832,388,851,381,849,388,851,394,849,398,870,417,865,422,856,424,856,431,863,452,867,466,877,482,877,487,892,489,893,503,891,505,893,511,891,512,900,522,896,533,886,540,865,537,856,527,846,533,849,541,834,541,839,534,811,534,815,525,806,516,791,522,791,518,776,527,767,522,762,525,767,530,764,536,753,522,748,527,750,533,741,533,711,533,710,513,710,509,711,499,719,494,717,474,710,475,705,468,700,468,694,480,682,475"
    data-alt="Bronckhorst"
    data-title="Bronckhorst"
  />
  <area
    href="#"
    shape="poly"
    coords="616,447,616,440,631,418,631,410,635,401,641,393,654,384,659,377,656,372,697,358,697,367,701,372,714,367,719,379,724,391,724,400,736,401,743,405,745,415,739,421,731,418,726,424,717,419,715,433,705,442,696,453,689,447,686,449,684,445,672,433,661,431,654,424,634,438,628,445,621,447,617,447"
    data-alt="Brummen"
    data-title="Brummen"
  />
  <area
    href="#"
    shape="poly"
    coords="151,567,161,562,158,560,167,548,187,553,196,560,208,560,219,544,237,546,258,539,266,530,278,530,283,532,300,532,318,544,331,546,337,555,346,560,358,562,360,567,351,574,342,569,339,571,327,569,334,579,341,578,338,592,307,590,304,595,300,589,293,590,283,589,271,595,259,600,255,602,245,616,210,640,206,631,196,633,201,624,194,616,184,613,171,593,175,590,175,583,173,582,164,581,158,576"
    data-alt="Buren"
    data-title="Buren"
  />
  <area
    href="#"
    shape="poly"
    coords="94,583,114,547,129,555,135,555,149,534,165,550,151,568,157,578,133,593,130,588,100,595,102,588,100,585"
    data-alt="Culemborg"
    data-title="Culemborg"
  />
  <area
    href="#"
    shape="poly"
    coords="679,515,679,508,689,503,690,496,690,480,700,475,700,471,708,475,718,475,719,492,711,496,710,508,696,515"
    data-alt="Doesburg"
    data-title="Doesburg"
  />
  <area
    href="#"
    shape="poly"
    coords="700,532,712,533,753,536,748,525,752,523,755,529,764,537,769,530,763,527,769,523,777,527,790,518,792,523,804,518,811,520,816,525,811,536,836,534,834,541,850,543,847,532,856,530,864,536,843,574,844,576,832,588,815,585,804,574,797,571,797,567,778,568,748,567,736,568,736,575,728,569,724,564,717,560,705,551,703,539"
    data-alt="Doetinchem"
    data-title="Doetinchem"
  />
  <area
    href="#"
    shape="poly"
    coords="339,649,339,642,349,635,346,628,356,621,338,624,325,620,352,611,380,616,401,617,419,619,419,628,410,644,410,647,393,647,390,661,394,669,374,676,367,673,358,675,356,662,360,656,356,652,355,647"
    data-alt="Druten"
    data-title="Druten"
  />
  <area
    href="#"
    shape="poly"
    coords="592,575,604,569,604,540,614,534,624,536,627,541,633,541,640,533,648,532,654,533,654,537,648,539,648,551,642,560,649,565,644,572,644,582,640,586,640,593,633,597,630,596,619,595,607,600,595,586,597,582"
    data-alt="Duiven"
    data-title="Duiven"
  />
  <area
    href="#"
    shape="poly"
    coords="344,466,346,439,346,432,344,431,334,407,345,394,352,397,412,383,417,387,421,380,438,381,440,379,445,372,454,367,466,370,475,365,520,365,526,372,527,393,541,410,548,411,558,415,581,417,579,438,555,452,550,452,548,464,540,466,520,461,513,468,496,492,454,495,450,513,418,520,379,520,377,513,372,519,365,511,362,501,363,481,349,473,351,466"
    data-alt="Ede"
    data-title="Ede"
  />
  <area
    href="#"
    shape="poly"
    coords="461,114,496,83,495,80,496,65,509,48,534,67,529,74,551,102,557,107,551,109,562,126,553,135,534,160,529,156,527,158,501,130,501,123,496,118,494,116,481,122,480,119,475,121,471,123"
    data-alt="Elburg"
    data-title="Elburg"
  />
  <area
    href="#"
    shape="poly"
    coords="527,167,541,151,554,135,581,121,628,150,628,156,634,156,635,163,640,157,656,156,666,160,654,167,654,188,642,187,630,224,634,240,635,250,628,245,628,241,603,241,604,231,602,231,592,244,572,241,536,252,523,259,518,241,520,238,515,230,516,226,512,215,520,210,534,191,534,189,537,182"
    data-alt="Epe"
    data-title="Epe"
  />
  <area
    href="#"
    shape="poly"
    coords="337,229,339,206,352,195,372,203,380,191,388,194,415,217,418,210,431,189,459,202,454,231,461,238,459,247,466,271,433,279,417,276,405,262,398,250,377,243,358,240"
    data-alt="Ermelo"
    data-title="Ermelo"
  />
  <area
    href="#"
    shape="poly"
    coords="73,626,93,586,100,586,104,588,100,595,128,588,132,595,158,581,164,582,175,583,175,590,170,595,184,613,187,613,201,626,194,630,196,634,202,633,210,637,203,647,203,655,196,654,191,661,175,656,163,655,146,656,137,656,133,661,128,661,121,665,94,666,95,649,86,635,77,642,74,635,76,631"
    data-alt="Geldermalsen"
    data-title="Geldermalsen"
  />
  <area
    href="#"
    shape="poly"
    coords="546,731,546,718,540,703,546,701,541,693,557,682,565,691,581,696,581,700,599,712,597,721,597,726,609,726,604,734,604,738,609,742,586,760,586,766,575,769,574,767,574,760,564,759,560,748"
    data-alt="Groesbeek"
    data-title="Groesbeek"
  />
  <area
    href="#"
    shape="poly"
    coords="344,203,358,161,370,156,374,161,394,149,398,156,414,142,426,161,426,164,429,177,435,180,435,187,414,217,386,191,380,191,374,201,363,201,352,194"
    data-alt="Harderwijk"
    data-title="Harderwijk"
  />
  <area
    href="#"
    shape="poly"
    coords="610,21,613,14,621,17,624,11,641,22,649,36,668,53,668,65,666,67,665,63,654,67,652,66,628,74,619,74,630,55,631,43,624,36,617,36,619,29"
    data-alt="Hattem"
    data-title="Hattem"
  />
  <area
    href="#"
    shape="poly"
    coords="579,121,588,115,620,76,631,76,654,69,662,65,668,66,668,74,677,84,680,94,675,97,677,104,675,112,687,121,684,123,683,136,656,146,654,157,640,157,634,161,634,154,628,157,628,151,624,150,604,142"
    data-alt="Heerde"
    data-title="Heerde"
  />
  <area
    href="#"
    shape="poly"
    coords="447,736,452,732,454,734,473,731,473,726,478,726,489,717,499,719,508,714,512,705,513,708,518,703,525,704,533,701,539,701,539,705,541,712,544,726,544,732,533,736,534,750,532,753,527,750,495,753,481,757,468,757,454,748,452,741"
    data-alt="Heumen"
    data-title="Heumen"
  />
  <area
    href="#"
    shape="poly"
    coords="1,652,36,656,43,654,38,647,38,640,53,640,58,626,72,624,74,633,79,642,86,640,95,651,95,663,98,668,94,679,100,696,86,696,58,684,38,690,18,691,22,670,4,666,4,658"
    data-alt="Lingewaal"
    data-title="Lingewaal"
  />
  <area
    href="#"
    shape="poly"
    coords="525,616,536,616,539,611,534,609,534,603,546,604,550,590,546,586,550,579,557,567,562,560,571,561,572,553,585,565,595,582,595,588,610,609,626,616,628,627,638,640,619,630,610,634,602,645,597,656,583,655,576,642,562,637,547,641,544,647,541,644,536,628,533,621,527,623"
    data-alt="Lingewaard"
    data-title="Lingewaard"
  />
  <area
    href="#"
    shape="poly"
    coords="710,286,719,282,724,288,742,290,742,288,764,289,770,288,780,283,787,285,792,290,815,289,813,281,822,271,830,273,837,266,844,271,863,273,863,275,868,290,886,311,893,311,899,328,910,337,905,353,891,360,898,369,907,381,905,398,902,410,898,405,891,405,884,403,879,407,870,414,849,400,853,393,849,388,850,380,833,388,827,384,827,377,811,374,808,360,774,365,755,367,750,358,741,356,735,349,731,351,726,346,726,337,721,335,714,325,705,325,708,314,719,311,726,302,722,293"
    data-alt="Lochem"
    data-title="Lochem"
  />
  <area
    href="#"
    shape="poly"
    coords="108,748,118,746,129,742,165,738,165,719,175,712,174,691,191,689,203,700,220,707,236,689,245,675,257,689,250,691,224,731,222,746,222,755,184,776,174,770,167,770,154,778,142,769,135,766,123,771,114,769,115,756"
    data-alt="Maasdriel"
    data-title="Maasdriel"
  />
  <area
    href="#"
    shape="poly"
    coords="624,670,619,668,619,663,628,656,628,647,620,640,604,642,611,633,617,630,628,633,640,641,652,648,647,654,645,656,634,668"
    data-alt="Millingen aan de Rijn"
    data-title="Millingen aan de Rijn"
  />
  <area
    href="#"
    shape="poly"
    coords="668,574,668,548,666,548,666,544,675,546,686,541,684,539,698,533,703,537,703,541,710,557,717,560,721,564,739,574,738,569,752,567,797,567,797,572,792,575,788,583,791,589,802,589,804,592,804,597,798,602,802,610,811,614,813,616,812,621,813,633,815,634,812,640,794,642,780,635,771,641,752,640,743,642,725,626,728,619,707,603,708,599,703,600"
    data-alt="Montferland"
    data-title="Montferland"
  />
  <area
    href="#"
    shape="poly"
    coords="286,624,281,610,288,604,283,602,285,595,282,589,295,593,300,588,302,595,304,596,307,590,339,595,342,579,335,578,330,571,330,571,338,572,345,569,351,574,360,564,374,574,388,576,394,574,405,569,410,574,404,578,404,585,426,581,418,585,417,595,425,595,431,602,433,609,436,620,410,619,398,616,369,616,358,611,341,613,325,621,306,623"
    data-alt="Neder-Betuwe"
    data-title="Neder-Betuwe"
  />
  <area
    href="#"
    shape="poly"
    coords="97,663,118,666,135,662,143,656,144,658,171,656,192,663,198,655,210,655,231,649,244,659,257,661,238,682,224,705,210,705,195,690,187,687,163,696,146,697,128,703,115,698,108,694,100,697,101,689,95,682"
    data-alt="Neerijnen"
    data-title="Neerijnen"
  />
  <area
    href="#"
    shape="poly"
    coords="243,297,250,271,295,259,296,279,310,285,317,285,338,314,387,310,388,316,384,324,379,325,372,318,353,323,353,330,346,330,348,339,337,344,330,334,330,330,327,325,318,325,316,330,311,328,296,334,297,346,295,352,272,346,271,314,254,299,250,303"
    data-alt="Nijkerk"
    data-title="Nijkerk"
  />
  <area
    href="#"
    shape="poly"
    coords="466,689,474,668,482,672,496,661,501,665,506,651,503,642,508,640,509,642,513,630,509,620,522,616,526,624,536,626,536,635,546,648,546,658,541,668,548,677,555,683,541,690,541,696,544,703,532,703,513,704,506,710,499,719,487,712,474,689"
    data-alt="Nijmegen"
    data-title="Nijmegen"
  />
  <area
    href="#"
    shape="poly"
    coords="415,142,424,142,461,115,468,125,480,121,482,123,495,119,501,123,501,129,527,158,534,161,527,168,537,184,534,188,534,192,519,210,512,215,516,236,518,243,518,250,518,251,501,243,499,245,457,247,461,241,461,236,456,231,459,202,432,191,435,188,436,180,432,180,426,163,428,161,426,158,425,158"
    data-alt="Nunspeet"
    data-title="Nunspeet"
  />
  <area
    href="#"
    shape="poly"
    coords="513,50,518,34,518,28,525,4,534,1,562,48,581,36,588,43,611,22,619,29,619,38,624,38,628,46,628,60,621,74,620,74,589,112,576,118,579,121,562,126,553,109,558,107,547,98,530,76,532,72,534,67"
    data-alt="Oldebroek"
    data-title="Oldebroek"
  />
  <area
    href="#"
    shape="poly"
    coords="896,532,902,523,892,513,898,511,893,503,895,503,892,492,902,480,906,480,912,473,917,474,919,467,926,470,940,484,958,480,968,471,973,467,973,461,979,459,980,445,982,442,992,446,993,450,999,453,1006,446,1013,447,1013,457,1029,466,1027,480,1015,489,1010,495,1008,511,1013,532,1001,544,992,541,971,536,952,534,934,541,919,540"
    data-alt="Oost Gelre"
    data-title="Oost Gelre"
  />
  <area
    href="#"
    shape="poly"
    coords="799,659,794,641,813,641,812,620,813,616,806,611,799,602,804,596,804,593,801,590,795,590,790,583,794,571,802,574,816,585,833,588,846,578,844,574,865,537,886,540,896,532,920,541,933,541,937,546,928,554,927,560,921,562,913,579,913,588,900,603,905,611,905,623,907,630,905,638,898,654,886,641,878,647,872,642,863,637,856,638,851,634,849,645,863,655,858,663,863,670,858,673,860,682,849,675,839,675,833,663,823,656,811,656"
    data-alt="Oude IJsselstreek"
    data-title="Oude IJsselstreek"
  />
  <area
    href="#"
    shape="poly"
    coords="396,560,408,561,419,555,440,550,453,544,460,544,475,553,481,553,503,541,513,548,508,553,509,568,522,571,534,569,548,579,546,586,548,592,547,596,546,606,534,604,534,611,534,616,506,619,512,628,509,638,503,642,489,634,477,635,460,627,452,627,435,620,438,616,433,616,435,604,424,593,417,593,417,586,425,582,424,578,405,581,405,576,410,574,407,569,396,574"
    data-alt="Overbetuwe"
    data-title="Overbetuwe"
  />
  <area
    href="#"
    shape="poly"
    coords="296,258,330,248,337,229,337,231,360,241,372,241,373,244,393,247,403,258,417,272,417,278,417,292,411,295,387,309,338,313,316,282,310,285,304,281,299,281,295,278"
    data-alt="Putten"
    data-title="Putten"
  />
  <area
    href="#"
    shape="poly"
    coords="454,495,495,491,489,511,508,518,527,519,527,534,532,539,527,541,505,541,482,553,475,553,461,546,454,543,445,551,439,548,442,534,440,533,443,513,452,513"
    data-alt="Renkum"
    data-title="Renkum"
  />
  <area
    href="#"
    shape="poly"
    coords="597,461,611,461,616,449,626,447,652,426,659,431,677,438,683,446,696,454,684,461,677,474,682,480,691,489,689,502,683,509,680,518,668,519,659,511,661,502,654,496,638,505,638,512,633,518,621,518,616,522,614,534,604,540,588,525,582,513,597,508,600,496,609,489"
    data-alt="Rheden"
    data-title="Rheden"
  />
  <area
    href="#"
    shape="poly"
    coords="609,602,624,596,630,595,638,597,670,602,669,604,677,616,675,620,684,619,697,623,700,642,715,649,712,652,715,669,696,662,675,663,652,644,645,642,635,638,630,628,627,616,621,609"
    data-alt="Rijnwaarden"
    data-title="Rijnwaarden"
  />
  <area
    href="#"
    shape="poly"
    coords="575,502,572,466,576,452,585,442,607,436,617,440,616,447,614,457,609,460,599,459,609,489,599,496,599,509,590,512,583,512"
    data-alt="Rozendaal"
    data-title="Rozendaal"
  />
  <area
    href="#"
    shape="poly"
    coords="283,435,299,425,299,411,304,405,323,417,330,419,330,428,328,435,313,440,297,447"
    data-alt="Scherpenzeel"
    data-title="Scherpenzeel"
  />
  <area
    href="#"
    shape="poly"
    coords="203,655,203,647,247,616,257,602,266,592,283,593,283,600,286,606,279,611,286,624,272,630,259,647,255,661,243,659,233,649,223,655"
    data-alt="Tiel"
    data-title="Tiel"
  />
  <area
    href="#"
    shape="poly"
    coords="541,668,546,652,541,654,553,640,569,640,583,654,596,659,603,654,604,642,621,641,627,645,628,654,627,661,619,663,621,672,616,677,602,680,590,675,581,686,585,696,581,697,562,690,554,680,548,675,550,670"
    data-alt="Ubbergen"
    data-title="Ubbergen"
  />
  <area
    href="#"
    shape="poly"
    coords="630,224,641,187,654,188,648,196,654,201,658,205,659,215,670,217,675,229,677,238,686,257,684,264,698,268,701,272,696,281,708,295,712,288,728,302,719,311,710,316,707,321,711,327,722,337,728,346,724,358,698,358,659,370,649,359,649,348,642,332,645,321,640,296,631,292,630,283,626,268,633,250,634,247,635,238"
    data-alt="Voorst"
    data-title="Voorst"
  />
  <area
    href="#"
    shape="poly"
    coords="372,569,387,562,381,548,386,541,377,533,380,526,373,520,376,516,381,520,410,519,417,525,419,520,442,515,439,532,440,534,438,546,440,550,431,550,414,555,407,561,396,561,396,572,387,576"
    data-alt="Wageningen"
    data-title="Wageningen"
  />
  <area
    href="#"
    shape="poly"
    coords="248,676,258,655,268,637,281,626,304,626,328,619,337,626,355,619,341,649,352,649,359,655,356,661,360,673,373,676,373,680,370,683,362,680,355,684,339,684,337,696,318,693,309,682,299,683,295,691,288,700,275,703,262,698"
    data-alt="West Maas en Waal"
    data-title="West Maas en Waal"
  />
  <area
    href="#"
    shape="poly"
    coords="583,562,583,547,602,540,604,569,590,575"
    data-alt="Westervoort"
    data-title="Westervoort"
  />
  <area
    href="#"
    shape="poly"
    coords="372,684,374,677,394,668,393,661,393,656,393,645,412,647,419,663,415,666,468,680,464,689,473,690,487,715,492,717,478,728,474,726,473,729,454,734,452,731,447,738,435,734,425,722,422,719,410,719,403,710,396,694,381,691"
    data-alt="Wijchen"
    data-title="Wijchen"
  />
  <area
    href="#"
    shape="poly"
    coords="1029,470,1048,468,1105,508,1102,511,1114,513,1118,536,1116,541,1111,541,1100,547,1097,567,1081,589,1073,590,1070,599,1063,602,1055,610,1035,592,1028,588,1022,593,1013,581,1008,578,997,572,999,561,996,558,1001,548,1001,544,1010,532,1010,508,1013,499,1011,495,1024,480,1028,481"
    data-alt="Winterswijk"
    data-title="Winterswijk"
  />
  <area
    href="#"
    shape="poly"
    coords="11,696,31,696,53,687,84,700,104,696,133,703,173,689,175,712,165,719,165,736,109,748,114,752,114,769,81,773,80,767,88,757,87,750,88,739,79,734,63,722,55,724,50,734,45,729,35,717,13,705"
    data-alt="Zaltbommel"
    data-title="Zaltbommel"
  />
  <area
    href="#"
    shape="poly"
    coords="613,534,614,525,621,516,630,518,640,511,640,505,647,499,661,505,661,513,665,520,677,518,680,515,698,516,703,513,708,513,710,532,691,533,686,537,684,541,676,546,666,543,665,548,668,548,668,574,710,604,710,604,689,613,686,610,677,614,669,606,670,602,662,597,652,597,640,597,637,596,637,583,642,581,649,562,647,560,649,540,654,537,655,532,640,532,633,543,627,541,626,534"
    data-alt="Zevenaar"
    data-title="Zevenaar"
  />
  <area
    href="#"
    shape="poly"
    coords="697,369,743,353,755,367,771,367,806,363,808,374,780,388,773,401,769,403,750,398,748,405,748,412,743,412,741,403,736,398,724,398,722,388,721,380,715,367,698,367,698,356,715,355,719,353,729,353"
    data-alt="Zutphen"
    data-title="Zutphen"
  />
</map>

<div class="resize-controls">
  <input id="make-small" type="button" value="Make it small" />
  <input id="make-big" type="button" value="Make it big" />
  <div class="resize-any-height-controls">
    <input id="make-any" type="button" value="Make it this width" />
    <input type="text" id="new-size" value="500" class="resize-number-input" />
  </div>
</div>

<style>
  .resize-controls {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1rem;
  }
  .resize-any-height-controls {
    display: flex;
    gap: 1rem;
    flex-wrap: nowrap;
  }
  .resize-controls input[type='button'] {
    padding: 0.1rem 0.4rem;
  }
  .resize-number-input {
    width: 80px;
  }
</style>
